<template>
    <div class="page-container">
      <div ref="plantRef" class="container-charts"></div>
    </div>
  </template>
  
  <script>
  import axios from "axios";
  import { map } from '../request/api'
  export default {
    data() {
      return {
        sData:[],
        mapR:[],
        info:null
      };
    },
    computed:{
        getTheme(){
            return this.$store.state.theme
        }
    },
    watch:{
        getTheme(){
            this.info.dispose()
            this.initChart()
            this.screen()
        }
    },
    mounted() {
      this.initChart();
      this.screen()
      window.addEventListener("resize",this.screen)
    },
    destroyed(){
        window.removeEventListener("resize",this.screen)
    },
    methods: {
      async initChart() {
        let dom = this.$refs.plantRef;
        let myChart = this.$echarts.init(dom,this.getTheme);
        this.info = myChart;
        let res=await map()
        this.sData=res.data
        let subText=res.data.MainPlants
        //页面一加载就调用地图数据
        this.mapR = await axios.get("http://localhost:8080/map/china.json");
        console.log(this.mapR)
        this.$echarts.registerMap('china',this.mapR.data)
        let options = {
          title:{
            text:"各地区农作物覆盖面积",
            subtext:subText+'万亩',
            left:20,
            top:10,
            subtextStyle:{
                fontSize:30
            }
          },
          grid:{
            left:"10%",
            top:"20%",
            right:"10%",
            bottom:"10%"
          },
          visualMap:{
            show:true,
            calculable:true,
            max:500,
            min:0,
            inRange:{
                color:["white","blue"]
            }
          },
          series:[
            {
              type:'map',// 用的是地图的数据类型
              map:'china',// 这里的map属性必须要和你注册的属性一致
              data:this.sData.content,
              lable:{
                show:true,
                fontSize:8,
              }
            }
          ]
        };
        myChart.setOption(options);
      },
      screen(){
        this.info.resize()
        let width=this.$refs.plantRef.offsetWidth
        let num=(width/100)*5
        let option={
            title:{
                textStyle:{
                    fontSize:num
                }
            }
        }
        this.info.setOption(option)
      }
    },
  };
  </script>
  
  <style scoped></style>
  